<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <!--Includes-->
	<link href="css/mobiscroll.custom-2.4.4.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.4.4.min.js" type="text/javascript"></script>



    <script type="text/javascript">



(function ($) {
    $.mobiscroll.i18n.es = $.extend($.mobiscroll.i18n.es, {
        dateFormat: 'dd/mm/yy',
        dateOrder: 'ddmmyy',
        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
        dayText: 'Día',
        hourText: 'Hora',
        minuteText: 'Minutos',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        monthText: 'Mes',
        secText: 'Segundos',
        timeFormat: 'HH:ii',
        timeWheels: 'HHii',
        yearText: 'Año',
        setText: 'OK',
        cancelText: 'Cancelar'
    });
})(jQuery);


$(function () {


            var curr = new Date().getFullYear();
            var opt = {

            }

            opt.date = {preset : 'date'};
	opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
	opt.time = {preset : 'time'};

                $('#hora_inicio').val('').scroller('destroy').scroller($.extend(opt['datetime'], { theme: 'default', mode: 'scroller', display: 'inline', lang: 'es' }));

                $('#hora_fin').val('').scroller('destroy').scroller($.extend(opt['datetime'], { theme: 'default', mode: 'scroller', display: 'inline', lang: 'es' }));

        });
    </script>
</head>

<body>
    <div data-role="page" data-theme="b">
        <div data-role="header" data-theme="a">
            <h1>Evento</h1>
        </div>

        <div data-role="content" data-theme="d">
            <form id="testform">
               
                <div data-role="fieldcontain" id="demo_default">
                    <label for="hora_inicio">Comienzo de la actividad</label>
                    <input type="text" name="hora_inicio" id="hora_inicio" />
                </div>

                <div data-role="fieldcontain" id="demo2_default">
                    <label for="hora_fin">Fin de la actividad</label>
                    <input type="text" name="hora_fin" id="hora_fin" />
                </div>
                <!--Html-->
            </form>
        </div>
    </div>
</body>
</html>
